import React, { Component } from 'react'
import ReactDOM from 'react-dom'

export default class App extends Component {
  state = {
    username: 'xxx',
    content: '',
    frame: 'vue',
    sex: 'male',
    checkbox: ['apple']
  }
  HandleChange = (e) =>{
    this.setState({
      [e.target.name]:e.target.value
    })
  }
  HandleCheckbox = (e) => {
    // 如果点击的选中了，期望不选中
    // 如果点击的没选中，期望选中
    if (e.target.checked) {
      // 期望选中
      // 把 e.target.value 怼到数组里面
      this.setState({
        checkbox: [...this.state.checkbox, e.target.value]
      })
    } else {
      // 期望不选中，需要把 e.target.value 从 this.state.checkbox 中干掉
      // 先找到下标
      const index = this.state.checkbox.indexOf(e.target.value)
      if (index !== -1) {
        // 找到了，下面写法不 ok，因为不能直接修改原数据拉
        // this.state.checkbox.splice(idx, 1)
        // 1. 先拷贝一份元数据
        const copyCheckbox = [...this.state.checkbox]
        // 2. 删除拷贝的数据
        copyCheckbox.splice(index, 1)
        // 3. 用删除过后的拷贝的数据覆盖 this.state.checkbox
        this.setState({
          checkbox: copyCheckbox
        })
      }
    }
  }
  render () {
    return (
      <ul>
        <li>
          <label hemlfor='username'>用户名</label>
          <input id='username' name='username' type='text' value={this.state.username} onChange={this.HandleChange}></input>
        </li>
        <li>
          <label hemlfor='content'>其他信息</label>
          <textarea id='content' name='content' type='text' value={this.state.content} onChange={this.HandleChange}
            cols='30'
            rows='10'
          ></textarea>
        </li>
        <li>
          <label hemlfor='frame'>框架</label>
          <select id='frame' name='frame' value={this.state.frame} onChange={this.HandleChange}>
            <option value='react'>React</option>
            <option value='vue'>Vue</option>
            <option value='angular'>Angular</option>
          </select>
        </li>
        <li>
          <input type='radio' name='sex' id='male' value='male' checked={this.state.sex === 'male'} onChange={this.HandleChange}></input>
          <label hemlfor='male'>男</label>

          <input type='radio' name='sex' id='female' value='female' checked={this.state.sex === 'female'} onChange={this.HandleChange}></input>
          <label hemlfor='female'>女</label>

          <input type='radio' name='sex' id='unkonw' value='unkonw' checked={this.state.sex === 'unkonw'} onChange={this.HandleChange}></input>
          <label hemlfor='unkonw'>未知</label>
        </li>

        <li>
          {/* 当 this.state.checkbox 数组里面包含 'apple' 应该选中 */}
          <input type='checkbox' id='apple' value='apple' checked={this.state.checkbox.includes('apple')} onChange={this.HandleCheckbox}></input>
          <label hemlfor='apple'>Apple</label>
          <input type='checkbox' id='orange' value='orange' checked={this.state.checkbox.includes('orange')} onChange={this.HandleCheckbox}></input>
          <label hemlfor='orange'>Apple</label>
        </li>
      </ul>
    )
  }
}

ReactDOM.render(<App />, document.querySelector('#react'))